import React from "react";
import styles from "./index.module.less";

import { useState } from "react";
export default function Header(props) {
  const { getUserList } = props;
  const [searchKey, setSearchKey] = useState("");

  //1. 表单数据双向绑定的事件回调函数
  const changeInput = (e) => {
    setSearchKey(e.target.value);
  };

  return (
    <div className={styles.header}>
      <h1>根据名字搜索github用户信息</h1>
      <div>
        <input type="text" value={searchKey} onChange={changeInput} />
        <button
          onClick={() => {
            getUserList(searchKey);
          }}
        >
          搜索
        </button>
      </div>
    </div>
  );
}
